<template>
  <div id="activity">
     <scroll :data="activityList" class="game-wrap" :pullup="pullup" @pullup="loadData">
         <div class="content">
             <div class="activity-list" >
                <div class="model" v-for="item in activityList" @click="selectItem(item)">
                    <div class="img">
                        <img :src="item.image" alt="">
                    </div>
                    <p>
                        {{item.introduction}}
                    </p>
                </div>
            </div>
            <div class="loading-container" v-show="loadingShow">
                <loading></loading>
            </div>
         </div>
     </scroll>
     <router-view></router-view>
  </div>
</template>
<script>
    import scroll from 'components/scroll'
    import loading from 'components/loading'
    import slider from 'components/slider'
    export default{
        data(){
            return{
                activityList:[],
                loadingShow:false,
                isload:false,
                 pullup:true
            }
        },
        created(){
            this.loadData()
        },
        methods:{
            loadData(){
                this.loadingShow=true;
                if(this.isload==true){
                    return;
                };
                this.isload=true;
                setTimeout(() => {
                    this.$axios.get('/api/activity').then(res=>{
                     this.isload=false;
                    res=res.data.data.data;
                    if(res.length==0){
                        this.loadingShow=false;
                    }
                    this.activityList=res.concat(this.activityList);
                    console.log(this.activityList);
                    })
                }, 2000);
            },
            selectItem(item){
                this.$router.push({
                    path:`/activity/${item.id}`
                })
            }
        },
        components:{
            scroll,loading
        }
    }
</script>
<style lang="scss" scoped>
    #activity{
        position: fixed;
        top: 48px;
        bottom: 40px;
        width: 100%;
        overflow: hidden;
        z-index:999;
        .loading-container{
            text-align:center;
        }
        .game-wrap{
            height:100%;
            overflow:hidden;
        }
        .content{
             padding-bottom:20px;
        }
        .activity-list{
            width:100%;
            margin-top:12px;
        }
        .model{
            padding:0 8px 20px 8px;
            img{
                width:100%;
                border-radius:10px;
            }
            p{
                margin:0;
                width:100%;
                overflow:hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
</style>
